<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Bandit-Blog后台</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <c:import url="${pageContext.request.contextPath}/WEB-INF/jsp/commons/backheader.jsp"></c:import>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <fieldset class="layui-elem-quote">类型管理</fieldset>
        <table class="layui-table"
               lay-data="{width:1600,page:true,url:'${pageContext.request.contextPath}/queryTypeList', id:'typeTable',toolbar:'#toolbarType',defaultToolbar : ['filter']}"
               lay-filter="typeTable">
            <thead>
            <tr>
                <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
                <th lay-data="{field:'id', sort: true, fixed: true}">ID</th>
                <th lay-data="{field:'typeName',edit:'typeName',fixed: true}">类型名</th>
                <th lay-data="{field:'orderNum',edit:'orderNum',fixed: true}">排序顺序</th>
                <th lay-data="{fixed: 'right', title:'操作', toolbar: '#barType', width:200}">操作</th>
            </tr>
            </thead>
        </table>
        <fieldset class="layui-elem-quote">新增类型</fieldset>
        <form class="layui-form" id="typeAdd" style="width: 1680px">
            <div class="layui-form-item">
                <label class="layui-form-label">ID</label>
                <div class="layui-input-block">
                    <input type="number" class="layui-input" name="id" id="id" placeholder="输入ID" required lay-verify= "required">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">类型名</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="typeName" id="typeName" placeholder="输入类型名" required lay-verify= "required" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序顺序</label>
                <div class="layui-input-block">
                    <input type="number" class="layui-input" name="orderNum" id="orderNum" placeholder="输入排序顺序" required lay-verify= "required">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit id="save_btn">点击添加</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        $('#typeAdd').on('submit', function (e){
            let layer;
            layui.use(['layer'],function(){
                layer = layui.layer;
                layer.load(1);
            })
            e.preventDefault();
            let Data = $(this).serializeArray();
            console.log(Data);
            $.ajax({
                type: 'POST',
                url: '${pageContext.request.contextPath}/AddType',
                data: {
                    "id":Data[0].value,
                    "typeName":Data[1].value,
                    "orderNum":Data[2].value,
                },
                dataType: 'json',
                success: function (res) {
                    console.log(res.msg);
                    parent.layer.closeAll();
                    layer.msg('新增成功！');
                    setTimeout(function(){
                        parent.layer.closeAll();
                        window.location.href = '/toTypeManger';
                    },2000)
                },
                error: function () {
                    console.log("错误");
                }
            })
        });

    })
</script>
<script>
    //JS
    layui.use(['element', 'layer', 'util','table'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,table = layui.table
            ,$ = layui.$;

        //table点击修改
        table.on('edit(typeTable)', function(obj){
            var value = obj.value //得到修改后的值
                ,Data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            layer.alert('[ID: '+ Data.id +'] ' + field + ' 字段更改值为：'+ util.escape(value))    //需要后端
            $.ajax({
                url:"${pageContext.request.contextPath}/UpdateType",
                data:{
                    "id":Data.id,
                    "typeName":Data.typeName,
                    "orderNum":Data.orderNum
                },
                dataType:'json',
                success:function () {
                    console.log("UpdateType success");
                }
            })

        });

        //toolBar
        table.on('tool(typeTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data;        //获得当前行数据
            var layEvent = obj.event;   //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr;            //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'del'){ //删除
                layer.confirm('确定要删除吗', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        url:"${pageContext.request.contextPath}/DeleteBlogType?id="+data.id,
                    })
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something
                window.location.href="${pageContext.request.contextPath}/toUpdateType?id="+data.id;

            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });
        var $ = layui.$, active = {
            reload: function(){
                var TypeIDReload = $('#TypeIDReload');
                //执行重载
                table.reload('typeTable', {
                    url:'${pageContext.request.contextPath}/getBlogTypeById'  //ID获取
                    ,page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {       //where为向后台传的值
                        id:TypeIDReload.val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }

        });
    });
</script>
</body>
</html>
